import {
    request
} from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
// pages/category/category.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        //左侧分类数据
        leftMenuList: [],
        //右侧分类详情数据
        rightContent: [],
        //被点击的左侧菜单
        currentIndex: 0,
        //接口的返回数据
        catesList: []
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        /* web中本地存储和小程序中有区别
             web：localStorage.setItem('key','value')
             web：localStorage.getItem('key')
        存的时候有没有类型转换
            web：不管存入的是什么类型的数据，最终都会先调用一下toString()方法，把数据转换成字符串存入
            小程序没有数据类型限制，存入数据是什么类型，获取的数据就是什么类型
            
         先判断一下 本地存储中有没有旧数据
         {time：Date.now(),data:[...]}
         没有旧数据 直接发送新的请求
         有旧数据 同时 旧数据没有过期 使用本地旧数据
        */

        // 获取本地存储数据
        const Cates = wx.getStorageSync('cates')
        if (!Cates) {
            // 数据不存在
            this.getCates()
        } else {
            // 有旧数据 定义过期时间
            if (Date.now() - Cates.time > 1000 * 60 * 30) {
                //重新获取数据
                this.getCates()
            } else {
                //可以使用旧数据
                this.catesList = Cates.data
                // 构造左侧分类数据
                let leftMenuList = this.catesList.map(v => v.cat_name)
                // 构造右侧商品数据
                let rightContent = this.catesList[0].children
                //根据不同的索引渲染右侧内容
                this.setData({
                    leftMenuList,
                    rightContent
                })
            }
        }

    },

    // getCates() {
    //     // 用promise 优化异步请求
    //     // 发送异步请求来获取轮播图数据
    //     request({
    //         url: '/categories'
    //     }).then(result => {
    //         this.catesList = result.data.message

    //         // 把接口的数据存入本地存储中
    //         wx.setStorageSync('cates', {
    //             time: Date.now(),
    //             data: this.catesList
    //         })

    //         // 构造左侧分类数据
    //         let leftMenuList = this.catesList.map(v => v.cat_name)
    //         // 构造右侧商品数据
    //         let rightContent = this.catesList[0].children
    //         //根据不同的索引渲染右侧内容
    //         this.setData({
    //             leftMenuList,
    //             rightContent
    //         })
    //     })
    // },
    async getCates() {
        // 用 async 和 await 优化异步请求
        // 发送异步请求来获取轮播图数据
        const result = await request({
            url: '/categories'
        })
        this.catesList = result.data.message
        // 把接口的数据存入本地存储中
        wx.setStorageSync('cates', {
            time: Date.now(),
            data: this.catesList
        })
        // 构造左侧分类数据
        let leftMenuList = this.catesList.map(v => v.cat_name)
        // 构造右侧商品数据
        let rightContent = this.catesList[0].children
        //根据不同的索引渲染右侧内容
        this.setData({
            leftMenuList,
            rightContent
        })
    },
    // 左侧菜单的点击事件
    handleItemTap(e) {
        // 获取标题中的索引
        // 给data中的currentIndex赋值
        const {
            index
        } = e.currentTarget.dataset
        // 构造右侧商品数据
        let rightContent = this.catesList[index].children
        this.setData({
            currentIndex: index,
            rightContent
        })
    }
})